<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content="Orbiter is a bootstrap minimal & clean admin template"/>
    <meta name="keywords"
          content="chat, chat platform, discussion, video call, voice call, communication, conversation, messange, messanger, talk">
    <meta name="author" content="Themesbox">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>注册【Private Chat】線上聊天系統</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="/home/images/favicon.ico">
    <!-- Start css -->
    <link href="/home/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/home/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/home/css/style.css" rel="stylesheet" type="text/css">
    <!-- End css -->
</head>
<body class="vertical-layout">
<!-- Start Containerbar -->
<div id="containerbar" class="containerbar authenticate-bg">
    <!-- Start Container -->
    <div class="container">
        <div class="auth-box login-box">
            <!-- Start row -->
            <div class="row no-gutters align-items-center justify-content-center">
                <!-- Start col -->
                <div class="col-md-6 col-lg-5">
                    <!-- Start Auth Box -->
                    <div class="auth-box-right">
                        <div class="card">
                            <div class="card-body">
                                <form action="" id="register-form">
                                    <div class="form-head">
                                        <a href="/index" class="logo"><img src="/home/images/logo.svg"
                                                                           class="img-fluid" alt="logo"></a>
                                    </div>
                                    <h4 class="text-primary my-4">注册【Private Chat】線上聊天系統帳號</h4>
                                    <div class="form-group"
                                         style="display: flex;justify-content: space-between;align-items: center">
                                            <span style="font-size: 14px;line-height: 1.5;width: 40%;font-weight: 600;color: forestgreen;text-align: start;">
                                                用戶名 :
                                            </span>
                                        <label for="username"></label><input type="text" class="form-control"
                                                                             id="username" placeholder="請輸入用戶名"
                                                                             required>
                                    </div>
                                    <div class="form-group"
                                         style="display: flex;justify-content: space-between;align-items: center">
                                        <span style="font-size: 14px;line-height: 1.5;width: 40%;font-weight: 600;color: forestgreen;text-align: start;">
                                                性别 :
                                            </span>
                                        <label for="sex"></label><select class="form-control" id="sex" required>
                                            <option value="1">男</option>
                                            <option value="0">女</option>
                                        </select>
                                    </div>
                                    <div class="form-group"
                                         style="display: flex;justify-content: space-between;align-items: center">
                                        <span style="font-size: 14px;line-height: 1.5;width: 40%;font-weight: 600;color: forestgreen;text-align: start;">
                                                出生日期 :
                                            </span>
                                        <label for="birthday"></label><input type="date" class="form-control"
                                                                             id="birthday" pattern="YYYY-mm-dd"
                                                                             required>
                                    </div>

                                    <div class="form-group"
                                         style="display: flex;justify-content: space-between;align-items: center">
                                        <span style="font-size: 14px;line-height: 1.5;width: 40%;font-weight: 600;color: forestgreen;text-align: start;">
                                                密碼 :
                                            </span>
                                        <label for="password"></label><input type="password" class="form-control"
                                                                             id="password"
                                                                             placeholder="請輸入密碼" required>
                                    </div>
                                    <div class="form-group"
                                         style="display: flex;justify-content: space-between;align-items: center">
                                        <span style="font-size: 14px;line-height: 1.5;width: 40%;font-weight: 600;color: forestgreen;text-align: start;">
                                                重複密碼 :
                                            </span>
                                        <label for="re-password"></label><input type="password" class="form-control"
                                                                                id="re-password"
                                                                                placeholder="請再次輸入密碼" required>
                                    </div>
                                    <div class="form-row mb-3">
                                        <div class="col-sm-12">
                                            <div class="custom-control custom-checkbox text-left">
                                                <input type="checkbox" class="custom-control-input" checked id="terms">
                                                <label class="custom-control-label font-14" for="terms">我同意<a
                                                            href="javascript:void(0)"
                                                            id="show-policy">《Private Chat在線聊天系統政策》</a></label>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="javascript:void(0)" class="btn btn-success btn-lg btn-block font-18"
                                       id="submit-btn">立即注册</a>
                                </form>
                                <p class="mb-0 mt-3">已經有帳號? <a href="login">點我去登入</a></p>
                            </div>
                        </div>
                    </div>
                    <!-- End Auth Box -->
                </div>
                <!-- End col -->
            </div>
            <!-- End row -->
        </div>
    </div>
    <!-- End Container -->
</div>
<!-- End Containerbar -->
<!-- Start js -->
<script src="/home/js/jquery.min.js"></script>
<script src="/home/js/popper.min.js"></script>
<script src="/home/js/bootstrap.min.js"></script>
<script src="/home/js/modernizr.min.js"></script>
<script src="/home/js/detect.js"></script>
<script src="/home/js/jquery.slimscroll.js"></script>
<script src="/home/layer/layer.js"></script>
<script src="/home/js/common.js"></script>
<!-- End js -->
</body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#submit-btn").click(function () {
            const username = $("#username").val();
            if (username === '') {
                layer.msg('請填寫用戶名！');
                $("#username").focus();
                return;
            }
            const sex = $("#sex").val();
            if (sex === '') {
                layer.msg('請填寫性別！');
                $("#sex").focus();
                return;
            }
            const birthday = $("#birthday").val();
            if (birthday === '' || birthday === undefined) {
                layer.msg('請填寫出生日期！');
                $("#birthday").focus();
                return;
            }
            const password = $("#password").val();
            if (password === '') {
                layer.msg('請填寫密碼！');
                $("#password").focus();
                return;
            }
            const repassword = $("#re-password").val();
            if (repassword === '') {
                layer.msg('請再次填寫密碼！');
                $("#re-password").focus();
                return;
            }
            if (repassword !== password) {
                layer.msg('兩次填寫密碼不一致！');
                $("#re-password").focus();
                return;
            }
            if (!$("#terms").prop('checked')) {
                layer.msg('請勾選同意政策！');
                return;
            }
            $.ajax({
                url: 'register',
                type: 'POST',
                data: {username, sex, birthday, password, headPic: 'default.png'},
                dataType: 'json',
                success: function (data) {
                    if (data.code === 0) {
                        layer.msg('注册成功，請登入！');
                        window.location.href = 'login';
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function () {
                    alert('網絡錯誤!');
                }
            });
        });

        $("#show-policy").click(function () {
            layer.open({
                type: 1 //Page层类型
                , area: ['500px', '300px']
                , title: 'Private Chat線上聊天系統政策'
                , shade: 0.6 //遮罩透明度
                , maxmin: true //允许全屏最小化
                , anim: 1 //0-6的动画形式，-1不开启
                , content: '<div style="padding:10px;"><p>1.請在聊天過程中文明用語，不可辱駡、挑釁他人。</p>' +
                    '<p>2.為持續淨化社會環境，更好維護政治安全、社會安定和人民安寧，我公司將積極配合執法機构行動對用戶的違法行為進行嚴肅清查，包括違法政治言論，破壞個人隱私，進行黃賭毒、網絡謠言和網絡詐騙等違法行為，包括但不限於關停其帳號等，歡迎舉報違法可疑行為。</p>' +
                    '<p>3.用戶承諾不得以任何管道利用該軟件直接或間接從事違反中國法律以及社會公德的行為，我們有權對違反上述承諾的內容予以删除。</p>' +
                    '<p>4.用戶註冊成功後，將給予每個用戶一個用戶帳號及相應的密碼，該用戶帳號和密碼由用戶負責保管； 用戶應當對以其用戶帳號進行的所有活動和事件負法律責任。</p>' +
                    '</div>'
            });
        });

        $("#birthday").attr('max', dateFormat('YYYY-mm-dd', new Date()));
    });

</script>
</html>